<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width , user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>移动端</title>
</head>

<body>
    <!-- 
        一 meta
            0.单视口标签
            1.属性:
                width           =device-width(设备的宽度,非常重要) ,viewport(视口) 
                user-scalable   =no(拒绝用户缩放操作),
                initial-scale   =1.0(初始缩放倍数>0), 
                maximum-scale/minimum-scale   =1.0(最大/最小缩放比,大于0)
            2.写法(注意,这是`写在head标签当中的!):
                <meta name="viewport" content="width=device-width , user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        
        3.二倍图
            3.1物理像素&物理像素比
            物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6/7/8 是 750*1334
            我们开发时候的1px不是一定等于1个物理像素的
            PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同
            一个px的能显示的物理像索点的个数，称为物理像素比或屏幕像素比
    
    
    
            -->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .ccc {
            background-color: red;
            width: 374px;
            height: 200px;
        }
    </style>
    <script>

    </script>
    <div class="ccc"></div>
    你好啊兄弟

</body>

</html>